Skip to main content

Adding Comics: A Step-by-Step Guide

The ComicStrip component (hashcomics✨) is globally registered across the entire HashLearns site. You can use <ComicStrip /> anywhere in any .md or .mdx file without writing any import statements at all!

🛠 Why folder={require.context('./assets')} is Required:​

Before looking at the examples, remember this golden rule: Always include folder={require.context('./assets')} in your <ComicStrip /> tags. Webpack needs this line to find and bundle the local .png files from your ./assets/ folder into the final website build.

📖 The 4 Ways to Add Comics​

Here are the four complete examples showing how you can construct your comic carousels depending on your needs.

1. Selecting Specific Images (No Descriptions)​

If your comic panels are self-explanatory and don't need captions, you can just pass a flat list of filenames to the images prop.

<ComicStrip 
  images={[
    'img1.png',
    'img2.png',
    'img3.png'
  ]}
/>

2. Selecting Specific Images + Descriptions​

Use this method when you want to manually pick specific images and provide a unique description for each one. You can use tuples ['filename', 'description'] in the images prop:

<ComicStrip 
  images={[
    ['img1.png', "Click on the download button to start."],
    ['img2.png', "Run the installer setup wizard."],
    ['img3.png', "Complete the installation successfully."]
  ]}
/>

3. Selecting ALL Images (Auto-Filter, No Descriptions)​

The fastest and easiest method! Just give it the initial prefix of the image names, and it will load the entire sequence of images into a beautiful, caption-less carousel automatically. If no filter is passed, automatically all images will be selected from the assets folder.

<ComicStrip 
  filter="comic"
/>

4. Selecting ALL Images (Auto-Filter) + Descriptions​

If you have a bunch of images named sequentially (like comic1.png, comic2.png, comic3.png), you don't need to type out every single filename! Use the filter prop to grab them all, and map them to a descriptions array. Note: The number of descriptions in the array .will perfectly map to the images loaded by the filter, in numerical/alphabetical orderhiihello

<ComicStrip 
  filter="comic"
  descriptions={[
    "1. This text will show on comic1.png",
    "2. This text will show on comic2.png",
    "3. This text will show on comic3.png"
  ]}
/>

💡 Features Included Automatically:​

  • Prev < & Next > Controls: Easy navigation through panels.
  • Center Description: Clean white text centered between buttons.
  • Lightbox Zoom: Click any image panel to open a full-screen zoom overlay.
  • 1 / 3 Pill Counter: Real-time panel counter.
  • hashcomics✨ Signature: Minimalist brand tag in top-left corner.
  • Keyboard Support: Navigate using ← and → arrow keys on your keyboard.